<template>
  <div class="achievement-container">
    <div class="patrol-container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <div class="patrol-list">
            <van-cell-group
                v-for="(item, index) in jieduiList"
                :key="index"
                class="patrol-item"
            >
              <van-cell title="结队姓名" :value="item.pairName" />
              <van-cell title="结队工号" :value="item.pairId" />
              <van-cell title="结队类型" class="rate-cell">
                <template #value>
                  <span class="evaluation-text">{{ getContentClarityText(item.pairType) }}</span>
                </template>
              </van-cell>
              <van-cell title="结队状态" class="rate-cell">
                <template #value>
                  <span :class="getStatusClass(item.status)" class="evaluation-text">{{ getInteractionText(item.status) }}</span>
                </template>
              </van-cell>
              <van-cell title="结队时间" :value="formatTime(item.createTime)" />
              <!-- 结队操作 -->
              <van-cell
                  v-if="item.status === 0"
                  title="操作"
                  class="rate-cell"
                  @click="confirmUnbind(item.relationId)"
              >
                <template #value>
                  <van-button type="danger" size="small" class="unbind-button">结束结队</van-button>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>

  <!-- 二次确认弹窗 -->
  <van-dialog
      v-model:show="isConfirmDialogVisible"
      title="确认结束结队"
      show-cancel-button
      @confirm="handleUnbind"
      @cancel="isConfirmDialogVisible = false"
      close-on-click-overlay
      :cancel-button-text="'取消'"
      :confirm-button-text="'确认'"
      :confirm-button-color="'#7c2d7c'"
      :cancel-button-color="'#a5a4a4'"
  >
    <p class="dialog-text">确定要结束当前结队吗？</p>
  </van-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getTeacherRelationsUsingGet } from "../../Api/jiaoshijiedui.ts";
import { unbindTeacherPairUsingPost } from "../../Api/jiaoshijiedui.ts";
import { showToast } from "vant";

// 数据列表
const jieduiList = ref([]);
// 加载状态
const loading = ref(false);
// 是否已加载完成
const finished = ref(false);
// 是否正在下拉刷新
const refreshing = ref(false);
// 当前页码
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
// 二次确认弹窗
const isConfirmDialogVisible = ref(false);
// 当前要解除的relationId
const currentRelationId = ref<number | null>(null);

// 获取教师结队列表
async function getXunKeList() {
  try {
    loading.value = true;

    const response = await getTeacherRelationsUsingGet();

    if (refreshing.value) {
      jieduiList.value = [];
      refreshing.value = false;
    }

    const newData = response.data.data?.records || [];
    jieduiList.value = response.data.data;
    console.log(response.data.data)
    // 判断是否已加载全部数据
    if (newData.length < pageSize.value) {
      finished.value = true;
    }
  } catch (err) {
    showToast("获取数据失败");
  } finally {
    loading.value = false;
  }
}

// 加载更多
function onLoad() {
  if (refreshing.value) {
    refreshing.value = false;
  }
  currentPage.value += 1;
  getXunKeList();
}

// 获取状态类名
function getStatusClass(status) {
  switch (status) {
    case 0:
      return "status-ongoing";
    case 1:
      return "status-ended";
    default:
      return "status-unknown";
  }
}

// 下拉刷新
function onRefresh() {
  finished.value = false;
  loading.value = true;
  currentPage.value = 1;
  getXunKeList();
}

// 格式化时间
function formatTime(timeStr) {
  if (!timeStr) return "";
  const date = new Date(timeStr);
  return date.toLocaleString();
}

// 获取结队类型文本
function getContentClarityText(score) {
  const texts = ["老带新帮扶", "科级干部结队", "新老师导师指导"];
  return texts[Math.round(score) - 1] || "";
}

// 获取结队状态文本
function getInteractionText(score) {
  const texts = ["进行中", "已结束", "未知"];
  return texts[Math.round(score)] || "";
}

// 弹出二次确认弹窗
function confirmUnbind(relationId: number) {
  currentRelationId.value = relationId;
  isConfirmDialogVisible.value = true;
}

// 确认解除结队
async function handleUnbind() {
  if (currentRelationId.value === null) return;

  try {
    await unbindTeacherPairUsingPost({ relationId: currentRelationId.value });
    showToast("结队已成功结束");
    isConfirmDialogVisible.value = false;
    currentRelationId.value = null;
    getXunKeList(); // 刷新列表
  } catch (err) {
    showToast("解除结队失败");
  }
}

onMounted(() => {
  getXunKeList();
});
</script>

<style scoped>
.achievement-container {
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #f8f9fa;
}
.patrol-container {
  padding: 12px;
}

.patrol-item {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.evaluation-text {
  margin-left: 8px;
  color: #666;
}

.rate-cell {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

:deep(.van-cell__value) {
  flex: 1;
  text-align: right;
}
.dialog-text {
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}
.unbind-button {
  color: #fff;
  background-color: #7c2d7c;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}

.status-ongoing {
  color: #7c2d7c;
}

.status-ended {
  color: gray;
}
.status-unknown {
  color: red;
}
</style>